/* global document */
import React from 'react'
import {AutoComplete, Button, Cascader, Col, DatePicker, Divider, Form, Icon, Input, Row, Select} from 'antd'
import classnames from 'classnames'
import styles from './Filter.less'
import {message} from "antd/lib/index"
import Position from "utils/position"

const FormItem = Form.Item
const {Option} = Select

const ColProps = {
  xs: 6,
  sm: 6,
  style: {
    marginBottom: 6,
  },
}

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const status = [
  {
    id: 1,
    name: '好友总数',
    value: 10000,
    color: '#E03636',
    icon: 'team',
    count: 0,
  },
  {
    id: 2,
    name: '男',
    value: 1,
    color: '#4cb4e7',
    icon: 'man',
    count: 0,
  },
  {
    id: 3,
    name: '女',
    value: 2,
    color: '#FF6E97',
    icon: 'woman',
    count: 0,
  },
  {
    id: 4,
    name: '未知',
    value: 0,
    color: 'rgba(0, 0, 0, 0.45)',
    icon: 'question',
    count: 0,
  },
]

const getStat = (stat, item) => {
  if (stat && stat.length > 0) {
    if (item.value === 10000) {
      let total = 0
      stat.map(item => {
        total += item.y ? parseInt(item.y) : 0
      })
      item.count = total
    } else {
      let tmp = stat.filter(item => parseInt(item.x) === item.value)
      if (tmp.length > 0) {
        item.count = tmp.y
      }
    }
    return item.count
  }
  return 0
}

class Filter extends React.Component {

  render () {
    const {
      onFilterChange,
      empList,
      customerChannelList,
      friendTypeList,
      addWaysList,
      departments,
      expandForm,
      toggleForm,
      handleSearch,
      stat,
      form: {
        getFieldDecorator,
        getFieldsValue,
        setFieldsValue,
      },
    } = this.props

    const handleFields = (fields) => {
      const {minRequireDate, maxRequireDate, minBecomeFriendDate, maxBecomeFriendDate, minctime, maxctime, address} = fields
      if (minRequireDate) {
        fields.minRequireDate = minRequireDate.format('YYYY-MM-DD HH:mm:ss')
      }
      if (maxRequireDate) {
        fields.maxRequireDate = maxRequireDate.format('YYYY-MM-DD HH:mm:ss')
      }
      if (minBecomeFriendDate) {
        fields.minBecomeFriendDate = minBecomeFriendDate.format('YYYY-MM-DD HH:mm:ss')
      }
      if (maxBecomeFriendDate) {
        fields.maxBecomeFriendDate = maxBecomeFriendDate.format('YYYY-MM-DD HH:mm:ss')
      }
      if (minctime) {
        fields.minctime = minctime.format('YYYY-MM-DD HH:mm:ss')
      }
      if (maxctime) {
        fields.maxctime = maxctime.format('YYYY-MM-DD HH:mm:ss')
      }
      if (address) {
        fields.provinceId = address[0]
        fields.cityId = address[1]
        fields.areaId = address[2]
        delete fields.address
      }
      return fields
    }

    const handleFormReset = () => {
      const fields = getFieldsValue()
      for (let item in fields) {
        if ({}.hasOwnProperty.call(fields, item)) {
          if (fields[item] instanceof Array) {
            fields[item] = []
          } else {
            fields[item] = undefined
          }
        }
      }
      setFieldsValue(fields)
      handleSubmit()
    }

    const valid = fields => {
      const {type, keyword} = fields

      if (!type && keyword) {
        message.warn("请选择查询类型")
        return false
      }

      return true
    }

    const handleSubmit = () => {
      let fields = getFieldsValue()
      if (!valid(fields)) {
        return
      }
      fields = handleFields(fields)
      onFilterChange(fields)
    }

    const renderSimpleForm = () => (
      <Form layout="horizontal">
        <Row gutter={24}>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="好友微号">
              {getFieldDecorator('customerWxId')(<Input placeholder="好友微信号"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="归属微信">
              {getFieldDecorator('belongWxId')(<Input placeholder="归属运营微信号"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="归属员工">
              {getFieldDecorator('belongEmpId')(
                <AutoComplete
                  dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
                  style={{width: '100%'}}
                  onSearch={handleSearch}
                  placeholder="员工编号或名称"
                />,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem label={''}>
              <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
              <Button onClick={handleFormReset}>重置</Button>
              <a style={{marginLeft: 8}} onClick={toggleForm}>展开 <Icon type="down"/></a>
            </FormItem>
          </Col>
        </Row>
      </Form>
    )

    const renderAdvancedForm = () => (
      <Form layout="horizontal">
        <Row gutter={24}>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="好友微号">
              {getFieldDecorator('customerWxId')(<Input placeholder="好友微信号"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="归属微信">
              {getFieldDecorator('belongWxId')(<Input placeholder="归属运营微信号"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="归属员工">
              {getFieldDecorator('belongEmpId')(
                <AutoComplete
                  dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
                  style={{width: '100%'}}
                  onSearch={handleSearch}
                  placeholder="员工编号或名称"
                />,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="公司部门">
              {getFieldDecorator('belongDeptId')(
                <Select allowClear placeholder="请选择状态">
                  {departments.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="好友昵称">
              {getFieldDecorator('nickname')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="好友备注">
              {getFieldDecorator('remark')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="性别">
              {getFieldDecorator('gender')(
                <Select allowClear placeholder="请选择">
                  <Option value={0}>{'未知'}</Option>
                  <Option value={1}>{'男'}</Option>
                  <Option value={2}>{'女'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="省份/城市">
              {getFieldDecorator('address')(
                <Cascader
                  options={Position}
                  placeholder="请选择城市"
                />,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="是否星标">
              {getFieldDecorator('isStar')(
                <Select allowClear placeholder="请选择">
                  <Option value={1}>{'是'}</Option>
                  <Option value={0}>{'否'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="获客渠道">
              {getFieldDecorator('adAcquireChannelId')(
                <Select allowClear placeholder="请选择">
                  {customerChannelList.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="好友类型">
              {getFieldDecorator('type')(
                <Select allowClear placeholder="请选择">
                  {friendTypeList.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>

          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="添加方式">
              {getFieldDecorator('addType')(
                <Select allowClear placeholder="请选择">
                  {addWaysList.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>

          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="被我拉黑">
              {getFieldDecorator('inMyBlacklist')(
                <Select allowClear placeholder="请选择">
                  <Option value={1}>{'是'}</Option>
                  <Option value={0}>{'否'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>

          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="把我拉黑">
              {getFieldDecorator('inHisBlacklist')(
                <Select allowClear placeholder="请选择">
                  <Option value={1}>{'是'}</Option>
                  <Option value={0}>{'否'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="被我删除">
              {getFieldDecorator('deleteHe')(
                <Select allowClear placeholder="请选择">
                  <Option value={1}>{'是'}</Option>
                  <Option value={0}>{'否'}</Option>
                  <Option value={2}>{'未知'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="把我删除">
              {getFieldDecorator('deleteMe')(
                <Select allowClear placeholder="请选择">
                  <Option value={1}>{'是'}</Option>
                  <Option value={0}>{'否'}</Option>
                  <Option value={2}>{'未知'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>

          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="未联系天数">
              {getFieldDecorator('unContactDays')(<Input placeholder="最小未联系天数"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem label="inline" {...formItemLayout} label="成交总金额">
              <Col span={11}>
                <FormItem>
                  {getFieldDecorator('minTransactionTotalAmount')(<Input placeholder="最小值"/>)}
                </FormItem>
              </Col>
              <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
              </Col>
              <Col span={11}>
                <FormItem>
                  {getFieldDecorator('maxTransactionTotalAmount')(<Input placeholder="最大值"/>)}
                </FormItem>
              </Col>
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="订单次数">
              {getFieldDecorator('orderCount')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <FormItem {...formItemLayout} label="朋友圈权限">
              {getFieldDecorator('friendCirclePermission')(
                <Select allowClear placeholder="请选择">
                  <Option value={3}>{'正常'}</Option>
                  <Option value={0}>{'被我屏蔽'}</Option>
                  <Option value={1}>{'对方屏蔽我'}</Option>
                  <Option value={2}>{'互相屏蔽'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>

          <Col {...ColProps} xl={{span: 12}} md={4} sm={24}>
            <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="请求日期">
              <Col span={11}>
                <FormItem>
                  {getFieldDecorator('minRequireDate')(
                    <DatePicker
                      showTime
                      format="YYYY-MM-DD HH:mm:ss"
                      style={{width: '100%'}} placeholder="开始时间"/>)}
                </FormItem>
              </Col>
              <Col span={1}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
              </Col>
              <Col span={11}>
                <FormItem>
                  {getFieldDecorator('maxRequireDate')(
                    <DatePicker
                      showTime
                      format="YYYY-MM-DD HH:mm:ss"
                      style={{width: '100%'}} placeholder="结束时间"/>)}
                </FormItem>
              </Col>
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 12}} md={4} sm={24}>
            <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="通过日期">
              <Col span={11}>
                <FormItem>
                  {getFieldDecorator('minBecomeFriendDate')(
                    <DatePicker
                      showTime
                      format="YYYY-MM-DD HH:mm:ss"
                      style={{width: '100%'}} placeholder="开始时间"/>)}
                </FormItem>
              </Col>
              <Col span={1}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
              </Col>
              <Col span={11}>
                <FormItem>
                  {getFieldDecorator('maxBecomeFriendDate')(
                    <DatePicker
                      showTime
                      format="YYYY-MM-DD HH:mm:ss"
                      style={{width: '100%'}} placeholder="结束时间"/>)}
                </FormItem>
              </Col>
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 12}} md={4} sm={24}>
            <FormItem labelCol={{span: 4}} wrapperCol={{span: 18}} label="录入日期">
              <Col span={11}>
                <FormItem>
                  {getFieldDecorator('minctime')(
                    <DatePicker
                      showTime
                      format="YYYY-MM-DD HH:mm:ss"
                      style={{width: '100%'}} placeholder="开始时间"/>)}
                </FormItem>
              </Col>
              <Col span={1}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
              </Col>
              <Col span={11}>
                <FormItem>
                  {getFieldDecorator('maxctime')(
                    <DatePicker
                      showTime
                      format="YYYY-MM-DD HH:mm:ss"
                      style={{width: '100%'}} placeholder="结束时间"/>)}
                </FormItem>
              </Col>
            </FormItem>
          </Col>

          <Col {...ColProps} xl={{span: 6}} md={4} sm={24}>
            <div style={{display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', float: 'left'}}>
              <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
              <Button onClick={handleFormReset}>重置</Button>
              <a style={{marginLeft: 8}} onClick={toggleForm}>收起 <Icon type="up"/></a>
            </div>
          </Col>
        </Row>
      </Form>
    )

    const renderForm = () => {
      return expandForm ? renderAdvancedForm() : renderSimpleForm()
    }

    return (
      <div>
        <Row gutter={24}>
          <Col {...ColProps} xl={{span: 1}} md={{span: 2}} sm={{span: 6}}>
          </Col>
          {status.map(item => (
            <Col {...ColProps} xl={{span: 4}} md={{span: 4}} sm={{span: 12}}>
              <div className={classnames(styles['flex-status-bar'])} style={{color: `${item.color}`}}>
                <Icon type={item.icon} style={{fontSize: 20}} theme="outlined"/>&nbsp;
                <span>{item.name}：<span style={{fontWeight: 'bold', fontSize: 18}}>{getStat(stat, item)}</span></span>
              </div>
            </Col>
          ))}
          <Divider/>
        </Row>
        {renderForm()}
      </div>
    )
  }
}

export default Form.create()(Filter)
